WebXR点击测试结果：沉浸式体验的光线投射结果处理

WebXR设备API为直接在浏览器中创建沉浸式增强现实(AR)和虚拟现实(VR)体验开辟了令人兴奋的可能性。构建交互式WebXR应用程序的一个基本方面是理解并有效地利用点击测试结果。这篇博客文章提供了处理通过光线投射获得的点击测试结果的全面指南，使您能够在WebXR场景中创建直观且引人入胜的用户交互。

什么是光线投射，为什么它在WebXR中如此重要？

光线投射是一种用于确定从特定点和方向发出的光线是否与3D场景中的对象相交的技术。在WebXR中，光线投射通常用于模拟用户的视线或虚拟对象的轨迹。当光线与真实世界的表面（在AR中）或虚拟对象（在VR中）相交时，会生成点击测试结果。

点击测试结果至关重要，原因如下：

• 虚拟对象的放置：在AR中，点击测试允许您准确地将虚拟对象放置到真实世界的表面上，例如桌子、地板或墙壁。
• 用户交互：通过跟踪用户正在查看或指向的位置，点击测试可以实现与虚拟对象的交互，例如选择、操作或激活它们。
• 导航：在VR环境中，点击测试可用于实现导航系统，允许用户通过指向特定位置来传送或在场景中移动。
• 碰撞检测：点击测试可用于基本的碰撞检测，确定虚拟对象何时与另一个对象或真实世界发生碰撞。

了解WebXR点击测试API

WebXR点击测试API提供了执行光线投射并获得点击测试结果的必要工具。以下是关键概念和函数的分解：

XRRay

XRRay表示3D空间中的一条光线。它由一个起始点和一个方向向量定义。您可以使用XRFrame.getPose()方法创建一个XRRay，该方法返回跟踪的输入源（例如，用户的头部、手部控制器）的姿势。从姿势中，您可以推导出光线的起点和方向。

XRHitTestSource

XRHitTestSource表示点击测试结果的来源。您可以使用XRSession.requestHitTestSource()或XRSession.requestHitTestSourceForTransientInput()方法创建一个点击测试源。第一种方法通常用于基于持久源（例如，用户的头部位置）的连续点击测试，而第二种方法用于瞬态输入事件，如按钮按下或手势。

XRHitTestResult

XRHitTestResult表示光线和表面之间的单个交点。它包含有关交点的信息，例如从光线原点到点击点的距离以及点击点在场景参考空间中的姿势。

XRHitTestResult.getPose()

此方法返回点击点的XRPose。该姿势包含点击点的位置和方向，可用于放置虚拟对象或执行其他变换。

处理点击测试结果：分步指南

让我们逐步了解在WebXR应用程序中获取和处理点击测试结果的过程。此示例假定您正在使用像three.js或Babylon.js这样的渲染库。

1. 请求点击测试源

首先，您需要从XRSession请求一个点击测试源。这通常在会话开始后完成。您需要指定希望点击测试结果返回的坐标系。例如：

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

说明：

• xrSession.requestHitTestSource()：此函数从XR会话请求一个点击测试源。
• { space: xrSession.viewerSpace }：这指定了点击测试结果将返回的坐标系。viewerSpace相对于观看者的位置，而local相对于XR原点。您也可以使用localFloor来跟踪相对于地板的位置。
• 错误处理：try...catch块确保捕获并记录点击测试源创建期间的错误。

2. 在动画循环中执行点击测试

在您的动画循环（渲染每一帧的函数）中，您需要使用XRFrame.getHitTestResults()方法执行点击测试。此方法返回一个XRHitTestResult对象数组，表示场景中找到的所有相交点。

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

说明：

• frame.getViewerPose(xrSession.referenceSpace)：获取观看者（头戴式设备）的姿势。这对于了解观看者在哪里以及他们正在看哪里是必要的。
• frame.getHitTestResults(xrHitTestSource)：使用先前创建的点击测试源执行点击测试。
• hitTestResults.length > 0：检查是否找到任何相交点。

3. 处理点击测试结果

processHitTestResults()函数是您处理点击测试结果的地方。这通常涉及根据点击点的姿势更新虚拟对象的位置和方向。

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

说明：

• hitTestResults[0]：检索第一个点击测试结果。如果可能存在多个相交点，您可能需要遍历整个数组，并根据应用程序的逻辑选择最合适的结果。
• hit.getPose(xrSession.referenceSpace)：获取指定参考空间中点击点的姿势。
• virtualObject.position.set(...)和virtualObject.quaternion.set(...)：更新虚拟对象（例如，three.js Mesh）的位置和旋转（四元数）以匹配点击点的姿势。
• 视觉反馈：该示例还包括在点击点显示视觉反馈（例如，圆形或简单标记）的代码，以帮助用户了解他们与场景的交互位置。

高级点击测试技术

除了上面的基本示例之外，您还可以使用几种高级技术来增强您的点击测试实现：

使用瞬态输入进行点击测试

对于由瞬态输入触发的交互，例如按钮按下或手势，您可以使用XRSession.requestHitTestSourceForTransientInput()方法。此方法创建一个特定于单个输入事件的点击测试源。这对于避免基于连续点击测试的意外交互很有用。

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

过滤点击测试结果

在某些情况下，您可能希望根据特定标准（例如，到光线原点的距离或相交表面的类型）过滤点击测试结果。您可以通过在获得XRHitTestResult数组后手动对其进行过滤来实现此目的。

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

使用不同的参考空间

参考空间（viewerSpace、local、localFloor或其他自定义空间）的选择会显着影响点击测试结果的解释。考虑以下事项：

• viewerSpace：提供相对于观看者位置的结果。这对于创建直接与用户的视线相关的交互非常有用。
• local：提供相对于XR原点（XR会话的起点）的结果。这适用于创建对象在物理环境中保持固定的体验。
• localFloor：类似于local，但Y轴与地板对齐。这简化了将对象放置在地板上的过程。

选择最符合您应用程序要求的参考空间。尝试使用不同的参考空间以了解它们的行为和限制。

点击测试的优化策略

点击测试可能是一个计算密集型的过程，尤其是在复杂的场景中。以下是一些需要考虑的优化策略：

• 限制点击测试的频率：仅在必要时执行点击测试，而不是每帧都执行。例如，您可以仅在用户主动与场景交互时执行点击测试。
• 使用边界体积层次结构（BVH）：如果您要对大量对象执行点击测试，请考虑使用BVH来加速相交计算。像three.js和Babylon.js这样的库提供了内置的BVH实现。
• 空间划分：将场景划分为较小的区域，并仅对可能包含相交点的区域执行点击测试。这可以显着减少需要检查的对象数量。
• 减少多边形数量：简化模型的几何体以减少需要测试的多边形数量。这可以提高性能，尤其是在移动设备上。
• WebWorker：将计算卸载到Web Worker以确保点击测试过程不会锁定主线程。

跨平台注意事项

WebXR旨在实现跨平台，但不同设备和浏览器之间的行为可能存在细微差异。请记住以下几点：

• 设备功能：并非所有设备都支持所有WebXR功能。使用功能检测来确定哪些功能可用，并相应地调整您的应用程序。
• 输入配置文件：不同的设备可能使用不同的输入配置文件（例如，通用触摸屏、手部跟踪、游戏手柄）。确保您的应用程序支持多个输入配置文件并提供适当的后备机制。
• 性能：不同设备之间的性能差异很大。针对您计划支持的最低端设备优化您的应用程序。
• 浏览器兼容性：确保您的应用程序经过测试并在Chrome、Firefox和Edge等主要浏览器上运行。

使用点击测试的WebXR应用程序的全球示例

以下是一些有效利用点击测试来创建引人注目且直观的用户体验的WebXR应用程序示例：

• IKEA Place (瑞典):允许用户使用AR将宜家家具虚拟地放置在他们的家中。点击测试用于精确定位地板和其他表面上的家具。
• Sketchfab AR (法国):使用户能够在AR中查看Sketchfab中的3D模型。点击测试用于将模型放置在真实世界中。
• 增强图像(各种):许多AR应用程序使用图像跟踪与点击测试相结合，以将虚拟内容锚定到真实世界中的特定图像或标记。
• WebXR游戏(全球):正在开发许多使用WebXR的游戏，其中许多游戏依赖于点击测试来实现对象放置、交互和导航。
• 虚拟导览(全球):位置、博物馆或属性的沉浸式导览通常采用点击测试来实现用户导航和虚拟环境中的交互元素。

结论

掌握WebXR点击测试结果和光线投射处理对于在Web上创建引人注目且直观的AR和VR体验至关重要。通过理解基本概念并应用本博客文章中描述的技术，您可以构建无缝融合虚拟世界和现实世界的沉浸式应用程序，或者创建具有自然和直观用户交互的引人入胜的虚拟环境。请记住优化您的点击测试实现以获得性能，并考虑跨平台兼容性以确保所有用户都能获得流畅的体验。随着WebXR生态系统的不断发展，预计点击测试API将进一步发展和完善，从而为沉浸式Web开发开辟更多的创造性可能性。始终查阅最新的WebXR规范和浏览器文档以获取最新信息。